<script setup lang="ts">

import { onMounted, ref } from 'vue'
import EchartsComponent from '@/components/EchartsComponent.vue'
import * as echarts from 'echarts'

//可视化容器
const viewContainerRef = ref<HTMLElement>()

onMounted(() => {
  document.title = 'Rocc 博客管理系统'
})

const options = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['30%', '60%'],
      itemStyle: {
        borderRadius: 10,
        // borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '完成<=20%' },
        { value: 735, name: '完成40%' },
        { value: 580, name: '完成60%' },
        { value: 484, name: '完成80%' },
        { value: 300, name: '完成100%' }
      ]
    }
  ]
} as echarts.EChartsOption
</script>

<template>
  <div ref="viewContainerRef" class="viewContainer w-full h-full ">
    <div class="w-full h-1/2  flex">
      <div class="h-full w-3/12 ">
        <EchartsComponent :options="options" />
      </div>
      <div class="h-full w-6/12 "></div>
      <div class="h-full w-3/12 "></div>
    </div>
    <div class="w-full h-1/2">

    </div>
  </div>
</template>

<style lang="scss" scoped>
.viewContainer {
  min-width: 1024px;
  min-height: 546px;
  overflow: auto;
}

</style>
